<template>
  <view>
    <!-- 使用自定义的搜索组件 -->
    <view class="search-box">
      <my-search :bgcolor="'#3BA2FF'" class="search" @mySearch="gotoSearch"></my-search>
      <!-- <view class="posting">
        <u-button text="按钮图标" icon="map" plain shape="circle">发帖</u-button>
      </view> -->
    </view>
    <view class="tab_nav">
      <view class="navTitle" v-for="(item,index) in navList" :key="index">
        <view :class="{'active':isActive === index}" @click="checked(index)">
          {{item.title}}
        </view>
      </view>
    </view>

    <view class="" v-if="isActive == 0">
      <view class="nav_item" v-for="(item,index) in navListData" :key="index" @click="gotoDetail(item)">
        <view class="nav_item_title">
          {{item.articleTitle}}
        </view>
        <view class="nav_item_body">

          <view class="nav_item_info">

            <view class="nav_item_info_photo">
              <!-- <image src="../../../static/logo.png" mode=""></image> -->
              <view>{{item.articleAuthor}}</view>
            </view>
            <view class="nav_item_info_content">
              <text>{{item.articleTags!=null?item.articleTags:''}}</text>
            </view>
          </view>
          <view class="nav_item_img">
            <image :src="url+item.materialUrl" mode=""></image>
          </view>
        </view>
        <view class="nav_footer">
          <view class="" slot="foot">
            <u-icon name="thumb-up" size="50" color="#3BA2FF" :label="item.likes"></u-icon>
          </view>
          <view class="" slot="foot">
            <u-icon name="chat" size="50" color="#3BA2FF" :label="item.comments"></u-icon>
          </view>
          <view>
            <!-- <u-button open-type="share" type="primary" v-model="item.likes" :key="item.likes" size="mini" shape="circle">分享</u-button> -->
            
              <button :data-id="item.articleId" :data-name="item.articleTitle" type="primary" style="background-color: #3BA2FF;" catchtap="xxx" open-type="share" size="mini"
                shape="circle">分享</button>
          </view>
        </view>
      </view>
    </view>
    <view class="" v-if="isActive == 1">
      <view class="nav_item" v-for="(item,index) in navListData" :key="index" @click="gotoDetail(item)">
        <view class="nav_item_title">
          {{item.articleTitle}}
        </view>
        <view class="nav_item_body">

          <view class="nav_item_info">

            <view class="nav_item_info_photo">
              <!-- <image src="../../../static/logo.png" mode=""></image> -->
              <view>{{item.articleAuthor}}</view>
            </view>
            <view class="nav_item_info_content">
              <text>{{item.articleTags!=null?item.articleTags:''}}</text>
            </view>
          </view>
          <view class="nav_item_img">
            <image :src="url+item.materialUrl" mode=""></image>
          </view>
        </view>
        <view class="nav_footer">
          <view class="" slot="foot">
            <u-icon name="thumb-up" size="50" color="#3BA2FF" :label="item.likes"></u-icon>
          </view>
          <view class="" slot="foot">
            <u-icon name="chat" size="50" color="#3BA2FF" :label="item.comments"></u-icon>
          </view>
          <view>
            <!-- <u-button open-type="share" :key="item.likes"  type="primary"  size="mini" shape="circle">分享2</u-button> -->
            <button :data-id="item.articleId" :data-name="item.articleTitle" type="primary" style="background-color: #3BA2FF;" catchtap="xxx" open-type="share" size="mini"
              shape="circle">分享</button>
          </view>
        </view>
      </view>
    </view>
    <view class="" v-if="isActive == 2">
      <view class="followList" v-for="item in followList" :key="item.id">
        <view class="followAvator">
          <image class="userImage" :src="item.avatar"></image>
        </view>
        <view class="followInfo">
          <view class="followInfo_title">
            <view class="followName">
              {{item.nickname}}
            </view>
            <view class="followName">
              <u-button type="primary" size="mini">
                <u-icon name="plus" color="#fff"></u-icon>取消关注
              </u-button>
            </view>
          </view>
          <view class="">
            <text>性别：</text>{{item.sex?"男":"女"}}
          </view>
        </view>
      </view>
    </view>
    <u-tabbar v-model="current" :list="tablist" :beforeSwitch="beforeSwitch" :mid-button="true"></u-tabbar>
    <u-popup v-model="show" mode="bottom">

      <view class="contentBox">
        <!-- <image class="logo" :class="{'active':active}" src="../../static/nav_icon/fenxiang@2x.png"  mode="aspectFit"></image> -->
        <view class="tabbar-box-wrap">
          <view class="tabbar-box">
            <view class="tabbar-box-item" @click="goToPage('/subpackage/technology_share/share_new')">
              <image class="box-image" src="../../static/nav_icon/fenxiang@2x.png" mode="aspectFit">
              </image>
              <text class="explain">技术分享</text>
            </view>
            <view class="tabbar-box-item" @click="goToPage('/subpackage/technology_share/share_new_fault')">
              <image class="box-image" src="../../static/nav_icon/shebeifuwu@2x.png" mode="aspectFit">
              </image>
              <text class="explain">消缺支援</text>
            </view>
            <view class="tabbar-box-item" @click="goToPage('/subpackage/wind/build/build_demand')">
              <image class="box-image" src="../../static/nav_icon/offshore_wind.png" mode="aspectFit">
              </image>
              <text class="explain">建设需求</text>
            </view>
            <view class="tabbar-box-item" @click="goToPage('/subpackage/wind/build/build_service')">
              <image class="box-image" src="../../static/nav_icon/secondarymarket@3x.png" mode="aspectFit"></image>
              <text class="explain">设备服务</text>
            </view>
          </view>
          <view class="close_dialog">
            <view class="closeBox" @click="beforeSwitch(2)">
              <u-icon name="close"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tablist: [

          {
            iconPath: "/static/tabbar_icon/home@2x.png",
            selectedIconPath: "/static/tabbar_icon/home-active@2x.png",
            text: '首页',
            customIcon: false,
            pagePath: "/pages/home/home",
          },
          {
            iconPath: "/static/tabbar_icon/topic@2x.png",
            selectedIconPath: "/static/tabbar_icon/topic-active@2x.png",
            text: '话题',
            pagePath: "/pages/topic/topic",
          },
          {
            iconPath: "https://cdn.uviewui.com/uview/common/min_button.png",
            selectedIconPath: "https://cdn.uviewui.com/uview/common/min_button_select.png",
            text: '发布',
            midButton: true,
            customIcon: false,
          },
          {
            iconPath: "/static/tabbar_icon/message@2x.png",
            selectedIconPath: "/static/tabbar_icon/message-active@2x.png",
            text: '消息',
            customIcon: false,
            isDot: false,
            count: 0,
            pagePath: "/pages/commentsmsg/commentsmsg",
          },
          {
            iconPath: "/static/tabbar_icon/my@2x.png",
            selectedIconPath: "/static/tabbar_icon/my-active@2x.png",
            text: '我的',

            isDot: false,
            customIcon: false,
            pagePath: "/pages/myuser/myuser",
          },
        ],

        url: '',
        isActive: 0,
        navList: [{
          index: 0,
          title: '推荐'
        }, {
          index: 1,
          title: "热门"
        }, {
          index: 2,
          title: "关注"
        }],
        params: {
          categoryId: '0',
          pageNum: 1,
          pageSize: 10,
        },
        navListData: [],
        //是否正在请求数据
        isloading: false,
        total: 0,

        //  获取我的关注用户
        followList: [],
        show: false,
      };
    },
    onLoad() {
      var that = this;
      this.timer = setInterval(() => {
        if (this.$store.state.isLogin) {
          this.$u.api.getWindCommentsMsgDots({
              userId: this.$store.state.userinfo.id,
            })
            .then(res => {
              if (res.data > 0) {
                that.tablist[3].isDot = true;
                that.tablist[3].count = 1;
              } else {
                that.tablist[3].isDot = false;
                that.tablist[3].count = 0;
              }
            });
        }
      }, 5000);
      this.url = this.baseUrl
      // 2.在小程序页面刚加载的时候，调用获取轮播图数据的方法
      // this.getSwiperList();
      this.listArticleInfo(); // 行业动态信息
    },
    methods: {
      goToPage(url) {
        if (!url) return;
        uni.navigateTo({
          url
        });
      },
      beforeSwitch(index) {
        if (index == 2) {
          this.show = !this.show;
        }
        return true;
      },

      onShareAppMessage(res) {
        if (res.from === 'button') {
          console.log(res,'rrrr')
          return {
            title: res.target.dataset.name,
            path: '/subpackage/industry_dynamic_detail/industry_dynamic_detail?articleId=' + res.target.dataset.id
          }
        }
      },
      gotoDetail(item) {
        uni.navigateTo({
          url: '/subpackage/industry_dynamic_detail/industry_dynamic_detail?articleId=' + item.articleId
        })
      },

      // 把获取 我的关注用户
      myFollowInfo() {
        this.$u.api.getMyFollowList({
            userId: this.$store.state.userinfo.id
          })
          .then(res => {
            if (res.code != '200') return this.$u.toast(res.msg);
            this.followList = res.data
          });
      },

      // 获取内容信息
      listArticleInfo(cb) {
        this.isloading = true
        this.$u.api.article.articleTypeList(this.params)
          .then(res => {
            if (res.code != '200') return this.$u.toast(res.msg);
            console.log(res, 'res')
            this.isloading = false
            cb && cb()
            this.navListData = [...this.navListData, ...res.rows]
            this.total = res.total
          });
      },
      // 下拉加载
      onPullDownRefresh() {
        // 重置关键数据
        this.params.pageNum = 1;
        this.total = 0;
        this.isloading = false
        this.navListData = []
        this.listArticleInfo(() => uni.stopPullDownRefresh())
      },
      // 触底事件  上拉加载更多
      onReachBottom() {
        // 判断是否还有下一页数据
        if (this.params.pageNum * this.params.pageSize >= this.total) return this.$u.toast('数据加载完毕');
        if (this.isloading) return
        this.params.pageNum += 1
        this.listArticleInfo()
      },
      //  跳转到 搜索页面
      gotoSearch() {
        uni.navigateTo({
          url: '/subpackage/search/search'
        })
      },
      checked(index) {
        this.isActive = index
        this.navListData = [];

        if (index == 0) {
          this.params.categoryId = index + 1
          this.listArticleInfo()
        } else if (index == 1) {
          this.params.categoryId = index + 1
          this.listArticleInfo()
        } else if (index == 2) {
          // if (!this.$store.state.isLogin) return this.$u.toast("请登录");
          var login = this.checkLogin();
          if (!login) {
            return false;
          }
          this.myFollowInfo()
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F7F7F7;
  }

  // 搜索组件 吸顶效果
  .search-box {
    display: flex;
    // 设置定位效果为“吸顶”
    position: sticky;
    // 吸顶的“位置”
    top: 0;
    // 提高层级，防止被轮播图覆盖
    z-index: 999;

    .search {
      width: 100%;
    }

    .posting {
      height: 50px;
      line-height: 50px;
      background-color: #3BA2FF;
      width: 20%;
      display: flex;
      align-items: center;
    }

  }

  // tab 导航栏切换
  .tab_nav {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #FFFFFF;
    padding: 32rpx 0rpx;
    box-shadow: 0px 1px 1px #CCCCCC;

  }

  .tab_nav .navTitle {
    height: 60rpx;
    line-height: 60rpx;
    width: 100%;
    text-align: center;
    font-size: 32rpx;
    font-family: Alibaba PuHuiTi;
    color: #333;
  }

  .active {
    position: relative;
    color: #1F75FE;
  }

  .active::after {
    content: "";
    position: absolute;
    width: 100rpx;
    height: 4rpx;
    background-color: #1F75FE;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
  }

  .nav_item {
    background-color: #FFFFFF;
    margin: 20rpx 30rpx;
    padding: 20rpx 30rpx;

    .nav_item_title {
      font-size: 18px;
      overflow: hidden;
      font-size: large;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    //  内容区域
    .nav_item_body {
      height: 200rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #E5E5E5;
      margin-top: 20px;
      padding-bottom: 10px;

      .nav_item_info {

        .nav_item_info_photo {
          height: 50rpx;
          line-height: 50rpx;
          display: flex;
          margin-bottom: 15rpx;

          image {
            height: 50rpx;
            width: 50rpx;
            border-radius: 20rpx;
            margin-right: 10rpx;
          }
        }

        .nav_item_info_content {
          color: #999999;
          font-size: 24rpx;
          height: 130rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          padding-right: 5px;

          text: {
            height: 22px;
            line-height: 22px;
          }
        }
      }

      .nav_item_img {
        image {
          height: 180rpx;
          width: 190rpx;
        }
      }
    }

    .nav_footer {
      display: flex;
      justify-content: space-between;
      padding-top: 10px;
    }

  }


  // 我的关注用户
  .followList {
    margin-top: 20rpx;
    border-top: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    height: 150rpx;
    display: flex;

    // 头像信息
    .followAvator {
      width: 20%;
      padding: 10rpx;

      .userImage {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
      }
    }

    .followInfo {
      font-size: 22rpx;
      color: #000000;
      font-weight: bold;
      padding: 15rpx;
      width: 80%;
      display: flex;
      flex-direction: column;

      .followInfo_title {
        display: flex;
        justify-content: space-between;
      }
    }
  }


  .contentBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* #ifdef H5 */
    height: calc(100vh - var(--window-bottom) - var(--window-top));
    /* #endif */
    /* #ifndef H5 */
    height: 100vh;
    /* #endif */
    transition: opacity 0.3s;
    background: #333333;

    // opacity: 0;
    // &.active {
    // 	opacity: 1;
    // }
    .logo {
      position: relative;
      margin-top: -400upx;
      width: 200upx;
      height: 200upx;
      // z-index: -1;
      opacity: 0;
      transition: opacity 0.3s;

      &.active {
        opacity: 1;
      }
    }
  }

  .tabbar-box-wrap {
    position: absolute;
    width: 100%;
    padding: 50upx;
    box-sizing: border-box;
    bottom: 0;
    left: 0;

    .tabbar-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      display: flex;
      width: 100%;
      // background: #fff;
      // border-radius: 20upx;
      padding: 15upx 20upx;
      box-sizing: border-box;
      z-index: 2;

      // box-shadow: 0px 2px 5px 2px rgba(0, 0, 0, 0.1);
      // &:after {
      // 	content: '';
      // 	position: absolute;
      // 	bottom: -16upx;
      // 	left: 0;
      // 	right: 0;
      // 	margin: auto;
      // 	width: 50upx;
      // 	height: 50upx;
      // 	transform: rotate(45deg);
      // 	background: #fff;
      // 	z-index: 1;
      // 	box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.1);
      // 	border-radius: 2px;
      // }
      // &:before {
      // 	content: '';
      // 	position: absolute;
      // 	top: 0;
      // 	left: 0;
      // 	width: 100%;
      // 	height: 100%;
      // 	background: #ffffff;
      // 	border-radius: 20upx;
      // 	z-index: 2;
      // }
      .tabbar-box-item {
        display: flex;
        align-items: center;
        width: 46vw;
        //justify-content: center;
        // position: relative;
        // width: 100%;
        z-index: 3;
        margin: 40upx auto;
        color: $uni-color-subtitle;
        text-align: center;
        font-size: 100vw;
        justify-content: space-around;

        .box-image {
          width: 15vw;
          height: 15vw;
        }

        .explain {
          color: #FFFFFF;
          font-size: 7vw;
        }
      }
    }
  }

  .close_dialog {
    height: 100rpx;
    display: flex;
    justify-content: center;
    margin-top: 40rpx;

    .closeBox {
      background: #FFFFFF;
      margin: auto;
      border-radius: 50%;
      text-align: center;
      height: 100rpx;
      line-height: 100rpx;
      width: 100rpx;

    }
  }
</style>
